<template>
    <div>
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
                     @change="handleCheckAllChange">全选
        </el-checkbox>
        <el-checkbox-group v-model="checkedList" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="item in checkOptions" :value="item" :key="item">{{translateLabel[item]}}</el-checkbox>
        </el-checkbox-group>
    </div>
</template>

<script setup>
const emit = defineEmits(['changeShow'])

const options = ['collecting', 'editing', 'closed'];
const checkAll = ref(false)
const checkedList = ref(['collecting', 'editing', 'closed'])
const translateLabel = ref({
    'collecting': '收集中',
    'editing': '编辑中',
    'closed': '已关闭'
})
const checkOptions = ref(options)
const isIndeterminate = ref(true)

function handleCheckAllChange(val) {
    checkedList.value = val ? options : [];
    isIndeterminate.value = false;
}
function handleCheckedCitiesChange(value) {
    const checkedCount = value.length;
    checkAll.value = checkedCount === checkOptions.value.length;
    isIndeterminate.value = checkedCount > 0 && checkedCount < checkOptions.value.length;
}

onUpdated(() => {
    console.log(checkedList.value)
    emit('changeShow', checkedList.value)
});
</script>
<style scoped>

</style>